<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="utf-8"> 
        <title>工单详情</title>
        <link th:href="@{~/css/styles.css}" rel="stylesheet" />
        <link rel="stylesheet" th:href="@{~/css/innerstyle.css}">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	    <link rel="stylesheet" type="text/css" th:href="@{~/DataTables/datatables.min.css}"/>
        <script type="text/javascript" th:src="@{~/DataTables/datatables.min.js}"></script>
        <script>
            function orderForm_submit() {
                var orderId=$("#orderId").val();
                if(confirm("确定修改？")){
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/order/modify?orderId="+orderId ,//url
                        data: $('#orderForm').serialize(),
                        success: function (data) {
                            if (data.statue== "0") {
                                alert("修改成功！");
                                window.location.href ="/order/list";
                            }else{
                                alert("修改失败...");
                            }
                        },
                        error : function() {
                            alert("发送异常...");
                        }
                    });

                }
            }
        </script>
    </head>
    <body class="sb-nav-fixed">
    <div th:replace="bar::topbar"></div>
    <div id="layoutSidenav">
        <div th:replace="bar::#layoutSidenav_nav"></div>
        <div id="layoutSidenav_content">
    <div class="mainborder">

        <h1>工单详情</h1>

        <form role="form" id="orderForm">
            <div class="row">
                <div class="col-md-3">
                    <label >工单编号</label>
                    <input class="form-control" name="orderId" id="orderId" type="text" placeholder="123456" disabled th:value="${order.orderId}">
                </div>
                <div class="col-md-3 form-group">
                    <label for="workshopId"><span style="color: red;">*</span>下达车间</label>
                    <select  class="form-control" name="workshopId" id="workshopId">
                        <option th:selected="${order.workshopId==1}">1</option>
                        <option th:selected="${order.workshopId==2}">2</option>
                        <option th:selected="${order.workshopId==3}">3</option>
                        <option th:selected="${order.workshopId==4}">4</option>
                        <option th:selected="${order.workshopId==5}">5</option>
                    </select>
                </div>
                <div class="col-md-3 form-group">
                    <label for="createdDate">下单时间</label>
                    <input class="form-control" name="createdDate" id="createdDate" type="text" placeholder="2021-01-02" disabled th:value="${#dates.format(order.createdDate,'yyyy/MM/dd HH:mm:ss')}">
                </div>

                <div class="col-md-3 form-group">
                    <label for="finishDate">完成时间</label>
                    <input class="form-control" name="finishDate" id="finishDate" type="text" placeholder="未完成" disabled th:value="${#dates.format(order.finishDate,'yyyy/MM/dd HH:mm:ss')}">
                </div>
            </div>
            <div class="form-group">
                <label for="productName">产品名称</label>
                <input class="form-control" id="productName" type="text" placeholder="产品名称" disabled th:value="${order.productName}">
            </div>
            <div class="form-group">
                <label for="productId">产品编号</label>
                <input class="form-control" id="productId" type="text" placeholder="产品编号" disabled th:value="${order.productId}">
            </div>

            <div class="form-group">
                <label for="startDate">开始时间</label>
                <input class="form-control" name="createdDate" id="startDate" type="text" placeholder="2021-01-02" disabled th:value="${#dates.format(order.startDate,'yyyy/MM/dd HH:mm:ss')}">
            </div>

            <div class="form-group">
                <label for="limitTime"><span style="color: red;">*</span>产品工期</label>
                <input class="form-control" name="limitTime" id="limitTime" type="text" placeholder="产品工期" th:value="${order.limitTime}">
            </div>
            <div class="form-group">
                <label for="orderNum"><span style="color: red;">*</span>订购数量</label>
                <input class="form-control" name="orderNum" id="orderNum" type="text" placeholder="订购数量" th:value="${order.orderNum}">
            </div>
            <div class="form-group">
                <label for="customName"><span style="color: red;">*</span>客户名</label>
                <input class="form-control" name="customName" id="customName" type="text" placeholder="客户名" th:value="${order.customName}">
            </div>
            <div class="form-group">
                <label for="customPhone"><span style="color: red;">*</span>联系方式</label>
                <input class="form-control" name="customPhone" id="customPhone" type="text" placeholder="联系方式" th:value="${order.customPhone}">
            </div>
            <div class="form-group">
                <label for="statue"><span style="color: red;">*</span>当前状态</label>
                <select class="form-control" name="statue" id="statue" th:value="${order.statue}">
                    <option th:value="2" th:text="已完成" th:selected="2 == ${order.statue}"></option>
                    <option th:value="1" th:text="处理中" th:selected="1 == ${order.statue}"></option>
                    <option th:value="0" th:text="待处理" th:selected="0 == ${order.statue}"></option>
                </select>
            </div>
            <label for="myTable">产品工艺</label>
            <div id="form-group" >
                <table id="myTable" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>工艺序号</th>
                            <th>工艺名称</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="design,designStart:${designs}">
                            <td th:text="${designStart.count}"></td>
                            <td th:text="${design.processName}" style="color: blue;"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button type="button" onclick="orderForm_submit()" class="btn btn-danger" style="float: right;">提交</button>
        </form>


    </div>
        </div>
    </div>
    
    <script>
        $("#limitTime").blur(function(){
            var num=$(this).val();
            if(!isNaN(num)){
                $("#myAlert").css("display","none")
            }else{
                $("#myAlert").css("display","")
                $("#alertMes").html("工期只能为数字，单位为天")
                $("#limitTime").val("")
            }
        })
    </script>

    <!--<script>-->
        <!--$(document).ready( function () {-->
            <!--$('#myTable').DataTable({-->
                <!--"bFilter": false,-->
                <!--"bLengthChange": false,-->
                <!--"oLanguage": {-->
                    <!--"sProcessing": "正在加载中......",-->
                    <!--"sLengthMenu": "每页显示 _MENU_ 条记录",-->
                    <!--"sZeroRecords": "对不起，查询不到相关数据！",-->
                    <!--"sEmptyTable": "表中无数据存在！",-->
                    <!--"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",-->
                    <!--"sInfoFiltered": "数据表中共为 _MAX_ 条记录",-->
                    <!--"sSearch": "搜索",-->
                    <!--"oPaginate": {-->
                        <!--"sFirst": "首页",-->
                        <!--"sPrevious": "上一页",-->
                        <!--"sNext": "下一页",-->
                        <!--"sLast": "末页"-->
                    <!--}-->
                <!--}-->
            <!--});-->
        <!--} );-->

        <!--&lt;!&ndash;&ndash;&gt;-->
<!--//    </script>-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script th:src="@{~/js/scripts.js}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
    <script th:src="@{~/assets/demo/chart-area-demo.js}"></script>
    <script th:src="@{~/assets/demo/chart-bar-demo.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
    <script th:src="@{~/js/datatables-simple-demo.js}"></script>
</body>
</html>
